<template>
  <!-- 分类参数模块 -->
  <div class="params-container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card shadow="always">
      <el-alert title="注意：只允许为第三级分类设置相关参数" type="warning" :closable="false" show-icon>
      </el-alert>
      <!-- 练级选择器 -->
      <el-row>
        <el-col>
          选择商品分类:
          <el-cascader v-model="seleltProps" :options="goodsParams" :props="{ expandTrigger: 'hover', ...goodsProps }"
            @change="handleChange"></el-cascader></el-col>
      </el-row>
      <!-- 属性区域 -->
      <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect">
        <el-menu-item index="1">动态参数</el-menu-item>
        <el-menu-item index="2">静态参数</el-menu-item>
      </el-menu>
      <!-- 添加参数 -->
      <el-row> <el-button type="primary" style="margin:20px 0">添加参数</el-button></el-row>
      <!-- 表格区域 -->
      <el-table :stripe="true" :border="true" :data="goodsList">
        <!-- 展开行 -->
        <el-table-column type="expand" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-for="(item, index) in scope.row.attr_vals" :key="index" closable>{{ item }}</el-tag>
            <el-tag>+ tag</el-tag>
          </template>
        </el-table-column>
        <!-- 索引 -->
        <el-table-column type="index" label="#" align="center">
        </el-table-column>
        <!-- 参数名称 -->
        <el-table-column prop="attr_name" label="参数名称" align="center">

        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsParams: [], // 商品等级分类
      goodsProps: { // 商品可选项键名
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'

      },
      seleltProps: [], // 选择的练级选择器
      activeIndex: '1', // 当前激活的菜单
      activeSel: 'many', // 静态动态
      goodsList: [] // 查询到的参数
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    // 获取商品等级
    async getGoods() {
      const { data: res } = await this.$http.get('/categories', { params: { type: 3 } })
      // 对响应回来的数据进行校验
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.goodsParams = res.data
    },
    // 监听练级选择器
    async handleChange() {
      const parameID = this.seleltProps.length
      // 判断是否选中三级ID
      if (parameID !== 3) return this.$message.warning('请选择第三级权限')
      const { data: res } = await this.$http.get(`/categories/${this.seleltProps[parameID - 1]}/attributes`, {
        params: {
          sel: this.activeSel
        }
      })
      // 对响应回来的数据进行校验
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.goodsList = res.data
      //  判断有没有值
      if (res.data.length > 0) {
        this.goodsList[0].attr_vals = res.data[0].attr_vals.split(',')
      }
    },
    // 监听导航切换
    handleSelect(index) {
      // 判读 用户点击是 动态1 还是 静态2
      console.log(index)
      if (index === '1') {
        // 动态
        this.activeSel = 'many'
        this.handleChange()
      } else if (index === '2') {
        // 静态
        this.activeSel = 'only'
        this.handleChange()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.params-container {

  /* 面包屑导航 */
  .el-breadcrumb {
    margin-bottom: 20px;
  }

  /* 警告 */
  .el-alert {
    margin-bottom: 20px;
  }

  .el-tag {
    margin: 0 10px;
  }
}
</style>
